<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">
<f:view>
	<f:metadata>
		<f:viewAction action="#{menuMB.updateMenu(2)}" />
	</f:metadata>
	<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

		<!-- Definiendo la cabecera de la pagina -->
		<ui:define name="title">
			<h:outputText value="Lista de Movimientos" />
		</ui:define>

		<!-- Definiendo el cuerpo de la pagina -->
		<ui:define name="content">
			<h:outputStylesheet library="css" name="main.css" />

			<br />

			<h:panelGroup rendered="#{movimientosCajaBean.loginBean.dlgLogin}">
				<div class="modal-dialog-bg"
					style="opacity: 0.4; width: 1366px; height: 902px;"></div>
				<div class="modal-dialog p6n-popup"
					style="left: 512.5px; top: 100px;">
					<div>AUTENTICACION</div>
					<h:form id="formLogin">
						<script type="text/javascript">
							window.onload = function test(){
								document.getElementById('formLogin:txtUsuario').focus();
        					}
						</script>
						<div class="modal-dialog-content">
							<div id="p6n-cloudsql-content">
								<div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:outputLabel value="Usuario y/o password invalidos"
											rendered="#{!movimientosCajaBean.loginBean.autenticado and movimientosCajaBean.loginBean.success}" />
									</div>
									<div class="p6n-api-consent-screen-inputs">
										<div class="p6n-api-consent-screen-input-section">
											<div class="p6n-api-consent-screen-label"
												style="width: 150px;">USUARIO</div>
											<div>
												<h:inputText id="txtUsuario"
													value="#{movimientosCajaBean.loginBean.usuario}"
													required="true" requiredMessage="Ingrese usuario"
													autocomplete="off" />
											</div>
										</div>
										<div
											class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
											<h:message for="txtUsuario" />
										</div>
										<div class="p6n-api-consent-screen-input-section">
											<div class="p6n-api-consent-screen-label"
												style="width: 150px;">PASSWORD</div>
											<div>
												<h:inputSecret id="txtPassword"
													value="#{movimientosCajaBean.loginBean.password}"
													required="true" requiredMessage="Ingrese password"
													autocomplete="off" />
											</div>
										</div>
										<div
											class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
											<h:message for="txtPassword" />
										</div>
									</div>
								</div>
								<br></br>
							</div>
						</div>

						<div class="modal-dialog-buttons">
							<br />
							<h:commandButton value="Aceptar"
								actionListener="#{movimientosCajaBean.loginBean.login()}"
								action="#{movimientosCajaBean.extornarTransaccioncaja()}"
								styleClass="action green" onclick="onSubmitButton();" />
							<h:commandButton value="Cancelar"
								action="#{movimientosCajaBean.loginBean.setDlgLogin(false)}"
								immediate="true" styleClass="action" onclick="onSubmitButton();">
							</h:commandButton>
						</div>
					</h:form>
				</div>
			</h:panelGroup>

			<div>
				<div>
					<div class="p6n-api-app-section-box editable"
						style="margin-right: 380px;">
						<div class="p6n-api-app-section-title">
							<div class="p6n-api-app-section-collapse-icon"></div>
							<div class="p6n-api-app-section-title-text">
								<h:outputLabel value="#{movimientosCajaBean.caja.denominacion}" />
								<label>(<h:outputLabel
										value="#{movimientosCajaBean.caja.abreviatura}" />)
								</label>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<label>Estado:&nbsp;<h:outputLabel
										value="#{movimientosCajaBean.caja.estadoapertura.denominacion}" />
								</label>
							</div>
							<div class="p6n-api-app-section-description">Todas las
								operaciones son de responsabilidad del usuario en session</div>
						</div>
					</div>
					<br />
					<div class="p6n-api-consent-screen-title"
						style="margin-left: 10px;">Transacciones del Día en Caja</div>
					<div style="margin-left: 10px;">
						<h:form>
							<p:focus for="txtSearched"></p:focus>
							<div class="p6n-api-consent-screen-input-section">
								<div>
									<div style="float: left;">
										<h:inputText id="txtSearched"
											value="#{movimientosCajaBean.idTransaccioncaja}"
											maxlength="50" size="50" required="true"
											pt:placeholder="Nº Transacción" autocomplete="off" />
									</div>
									<div style="float: left;">
										<h:commandLink
											action="#{movimientosCajaBean.buscarTransaccioncaja()}"
											styleClass="button" style="margin: 0 0 0 1px;"
											onclick="onSubmitButton();">
											<span class="icon icon198"></span>
										</h:commandLink>
									</div>
								</div>
							</div>
							<div
								class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg"
								style="float: inherit;">
								<h:message for="txtSearched" />
							</div>
							<br />
							<br />
						</h:form>
					</div>
				</div>
				<div>
					<h:form>
						<div style="margin: 5px;">
							<p:dataTable var="transaccion"
								value="#{movimientosCajaBean.tablaMovimientos.rows}"
								selectionMode="single" paginatorPosition="bottom"
								selection="#{movimientosCajaBean.tablaMovimientos.selectedRow}"
								rowKey="#{transaccion}" rowIndexVar="row" paginator="true"
								rows="10" sortMode="multiple"
								paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
								rowsPerPageTemplate="10,25,50">

								<f:facet name="header">  
						            Transacciones realizadas durante el dia  
						        </f:facet>
								<p:column headerText="Nro" width="5%" style="text-align:center;">
									<h:outputText value="#{row + 1}" />
								</p:column>

								<p:column headerText="Nro op"
									sortBy="numerooperacionTransaccioncaja">
									<h:outputText
										value="#{transaccion.numerooperacionTransaccioncaja}" />
								</p:column>
								<p:column headerText="Nro trans" sortBy="idTransaccioncaja">
									<h:outputText value="#{transaccion.idTransaccioncaja}" />
								</p:column>
								<p:column headerText="Tipo transaccion" sortBy="tipotransaccion">
									<h:outputText value="#{transaccion.tipotransaccion}" />
								</p:column>
								<p:column headerText="Tipo movimiento"
									sortBy="denominacionTipotransaccion">
									<h:outputText
										value="#{transaccion.denominacionTipotransaccion}" />
								</p:column>
								<p:column headerText="Fecha" sortBy="fechaTransaccioncaja">
									<h:outputText value="#{transaccion.fechaTransaccioncaja}">
										<f:convertDateTime pattern="dd/MM/yyyy" timeZone="EST" />
									</h:outputText>
								</p:column>
								<p:column headerText="Hora" sortBy="horaTransaccioncaja">
									<h:outputText
										value="#{movimientosCajaBean.getStringTime(transaccion.horaTransaccioncaja)}" />
								</p:column>
								<p:column headerText="Monto">
									<h:outputText value="#{transaccion.montoTransaccion}" />
								</p:column>
								<p:column headerText="Moneda">
									<h:outputText value="#{transaccion.denominacionTipomoneda}" />
								</p:column>
								<p:column headerText="Estado">
									<h:outputText
										value="#{transaccion.estadoTransaccion ? 'ACTIVO' : 'EXTORNADO'}" />
								</p:column>
								<p:column headerText="STATUS" style="text-align: center;"
									width="159">
									<h:panelGroup rendered="#{transaccion.estadoTransaccion}">
										<div class="buttons">
											<h:commandButton
												action="#{movimientosCajaBean.autorizarExtornacion(transaccion)}"
												value="Extornar" styleClass="action red"
												style="margin: 0 2px 0 0;" onclick="onSubmitButton();" />
											<h:commandButton value="Detalle" styleClass="action"
												style="margin: 0 0 0 2px;" onclick="onSubmitButton();">
												<f:ajax
													listener="#{movimientosCajaBean.verDetalleTransaccion(transaccion)}"
													render=":dlgDetalle"></f:ajax>
											</h:commandButton>
										</div>
									</h:panelGroup>
									<h:panelGroup rendered="#{!transaccion.estadoTransaccion}">
										<h:commandButton value="No disp." styleClass="action"
											style="margin: 0px;">
										</h:commandButton>
									</h:panelGroup>
								</p:column>
							</p:dataTable>
						</div>
					</h:form>
				</div>
			</div>

			<h:panelGroup id="dlgDetalle">
				<h:panelGroup rendered="#{movimientosCajaBean.dlgDetalle}">
					<div class="modal-dialog-bg"
						style="opacity: 0.4; width: 1366px; height: 902px;"></div>
					<div class="modal-dialog p6n-popup"
						style="left: 512.5px; top: 100px;">
						<div class="modal-dialog-content">
							<h2>Detalle de transaccion</h2>
							<br/>
							<table style="width: 220px;">
								<thead>
									<tr>
										<td style="text-align: right"><label
											style="font-size: 14px;">Denominacion</label></td>
										<td style="text-align: right"><label
											style="font-size: 14px;">Cantidad</label></td>
										<td style="text-align: right"><label
											style="font-size: 14px;">Subtotal</label></td>
									</tr>
								</thead>
								<tbody>
									<ui:repeat
										value="#{movimientosCajaBean.listDetalleTransaccion}"
										var="detalle">
										<tr>
											<td style="text-align: right; vertical-align: middle;"><h:outputLabel
													value="#{detalle.denominacionmoneda.denominacion}"
													style="font-size: 12px;" /></td>
											<td style="text-align: right; vertical-align: middle;"><h:outputLabel
													value="#{detalle.cantidad}" style="font-size: 12px;" /></td>
											<td style="text-align: right; vertical-align: middle;"><h:outputLabel
													id="txtSubtotal" value="#{detalle.getSubtotal()}"
													style="font-size: 12px;" /></td>
										</tr>
									</ui:repeat>
								</tbody>
							</table>
						</div>
						<div class="modal-dialog-buttons">
							<h:form>
								<h:commandButton value="Cancelar" styleClass="action blue">
									<f:ajax listener="#{movimientosCajaBean.setDlgDetalle(false)}"
										render="dlgDetalle"></f:ajax>
								</h:commandButton>
							</h:form>
						</div>
					</div>
				</h:panelGroup>
			</h:panelGroup>

			<h:panelGroup rendered="#{movimientosCajaBean.success}">
				<div class="modal-dialog-bg"
					style="opacity: 0.4; width: 1366px; height: 902px;"></div>
				<div class="modal-dialog p6n-popup"
					style="left: 512.5px; top: 100px;">
					<div class="modal-dialog-content">Transacción Extornada
						Satisfactoriamente</div>
					<div class="modal-dialog-buttons">
						<h:form>
							<h:commandButton value="Aceptar"
								action="listarMovimientos?faces-redirect=true"
								styleClass="action blue" onclick="onSubmitButton();" />
						</h:form>
					</div>
				</div>
			</h:panelGroup>

			<h:panelGroup rendered="#{movimientosCajaBean.failure}">
				<div class="p6n-api-access-in-page-error" style="left: 516px;">
					<div>
						<p>
							<h:messages />
						</p>
					</div>
				</div>
			</h:panelGroup>

		</ui:define>

	</ui:composition>
</f:view>
</html>